<template>
  <div class="wrap">
      <div class="cover">
        <img v-if="pic" :src="pic" alt="图片" class="cover-img">
      </div>
      <div class="info">
          <div class="name">{{name}}</div>
          <div>{{formatFollow}}关注</div>
          <div>{{videos}}个相关视频</div>
      </div>
      <van-button type="default" :color="themeColor" class="follow" :disabled="focused" size="small">关注</van-button>
  </div>
</template>

<script>
import { inject, reactive, toRefs } from 'vue'
import { Button as VanButton } from 'vant'
import { formatNumber } from '@/utils'
export default {
  name: 'TagInfo',
  components: {
    VanButton
  },
  props: {
    name: {
      type: String
    },
    pic: {
      type: String
    },
    follow: {
      type: Number
    },
    videos: {
      type: Number
    },
    focused: {
      type: Boolean
    }
  },
  setup(props) {
    const params = reactive({
      formatFollow: formatNumber(props.follow),
      themeColor: inject('themeColor')
    })
    return {
      ...toRefs(params)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
    display: flex;
    padding: 20px 10px;
    border-bottom: 1px solid $color-grey;
}

.cover {    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 73px;
    height: 73px;
    margin-right: 10px;
    border: 1px solid $color-grey;
    background: {
      repeat: no-repeat;
      position: 50%;
    }
    background-image: url('~@/assets/images/tag.png');
    overflow: hidden;
    &-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
}

.info {
    align-self: center;
    flex: 2;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: $color-text-secondary;
    :global(.name){
        font-size: 16px;
        color: $color-text-primary;
        margin-bottom: 10px;
    }
}

.follow{
    align-self: center;
    font-size: 14px;
}
</style>